<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhaochang
 * @Date: 2022-07-19 09:42:10
 * @LastEditors: 976901273@qq.com
 * @LastEditTime: 2023-11-20 10:52:54
 * @Description:
 *
-->

<template>
  <div class="cn-insight-node-container">
    <div style="background:#FFFFFF;margin:15px">
      <!-- 搜索框-->
      <el-row style="padding-top:20px;font-weight:900;padding-bottom:20px">
        <el-col style="margin-left:25px" :span="2">
          选择集群供应商
        </el-col>
        <el-col :span="3">
          <el-select v-model="searchForm.category" size="mini" placeholder="请选择集群服务商" style="width: 100%" @change="getCluster">
            <el-option
              v-for="item in cloudVendors"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col style="margin-left:30px" :span="1">
          选择集群
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="searchForm.cluster"
            size="mini"
            placeholder="请选择集群"
            style="width: 100%"
            @change="getNode"
          >
            <el-option
              v-for="item in clusterOptions"
              :key="item.key"
              :label="item.key"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col style="margin-left:30px" :span="1">
          选择节点
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="searchForm.node"
            clearable
            size="mini"
            placeholder="请选择节点"
            style="width: 100%"
          >
            <el-option
              v-for="item in nodeOptions"
              :key="item.key"
              :label="item.key"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col style="margin-left:20px" :span="1">
          <el-button type="primary" size="mini" :loading="isResult" @click="search()">查询</el-button>
        </el-col>
        <el-col style="margin-left:20px" :span="1">
          <el-button size="mini" @click="resetClick">重置</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="margin-left:25px;font-weight:600" :span="2">
          自定义采集指标
        </el-col>
        <el-col :span="3" >
          <el-select
          style="width: 100%"
            size="mini"
            v-model="showMapList"
            multiple
            collapse-tags
            placeholder="请选择">
            <el-option
              v-for="item in showOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <div style="height:20px"></div>
    </div>
    <!-- 表格数据-->
    <el-row>
      <div style="background:#FFFFFF;margin:15px">
        <div class="editmanageList">
          <el-table
            :data="nodeList"
            :cell-style="{padding:'8px 0'}"
            stripe
            header-cell-class-name="listHeaderCell"
            :header-cell-style="{ color: '#696969' }"
            empty-text="暂无数据"
          >
            <el-table-column
              prop="nodeName"
              align="center"
              width="200"
              label="节点名称"
            >
              <template slot-scope="scope">
                <div style="height:45px;width:200px;background:#0091FF;cursor: pointer" @click="getDetail(scope.row)">
                  <el-col :span="7">
                    <img style="width:30px;position:relative;top:8px" src="@/assets/imgs/cn-insight/node.png" alt="" />
                  </el-col>
                  <el-col :span="16">
                    <div :title="scope.row.nodeName" style="color:#F2F9FF;font-size:12px;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                      {{ scope.row.nodeName }}<br />{{ scope.row.nodeIp }}
                    </div>
                  </el-col>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="arch"
              align="center"
              label="节点类型"
            />
            <el-table-column
              prop="nodeRole"
              align="center"
              label="角色"
            />
            <el-table-column
              prop="status"
              align="center"
              label="状态"
            />
            <el-table-column
              prop="nodeCpuUsePercent"
              align="center"
              label="CPU利用率"
            />
            <el-table-column
              prop="nodeMemUsePercent"
              align="center"
              label="内存利用率"
            />
            <el-table-column
              prop="processingRequest"
              align="center"
              label="容器组(已使用/总额度)"
            >
              <template slot-scope="scope">
                {{ scope.row.nodeContainerUseNum }}/{{ scope.row.nodeContainerQuota }}
              </template>
            </el-table-column>
            <el-table-column
              prop="creationTime"
              align="center"
              label="CPU(Cores)(已使用/总额度)"
            >
              <template slot-scope="scope">
                {{ scope.row.nodeCpuUseNum }}/{{ scope.row.nodeCpuQuota }}
              </template>
            </el-table-column>
            <el-table-column
              prop="processingRequest"
              align="center"
              label="内存(GiB)(已使用/总额度)"
            >
              <template slot-scope="scope">
                {{ scope.row.nodeMemUseNum }}/{{ scope.row.nodeMemQuota }}
              </template>
            </el-table-column>
            <el-table-column
              prop="nodeSysDiskQuota"
              align="center"
              label="系统盘(GiB)(已使用/总额度)"
            >
              <template slot-scope="scope">
                {{ scope.row.nodeDiskUseNum }}/{{ scope.row.nodeDiskQuota }}
              </template>
            </el-table-column>
            <el-table-column
              prop="creationTime"
              align="center"
              label="磁盘(GiB)(已使用/总额度)"
            >
              <template slot-scope="scope">
                {{ scope.row.nodeDiskUseNum }}/{{ scope.row.nodeDiskQuota }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" style="height: 22px; line-height: 22px; padding: 0 10px" @click="linkNodeManage(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end" style="margin-top: 30px;padding-bottom:20px">
            <el-pagination
              background
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="totalData"
              @current-change="currentChange"
            />
          </el-row>
        </div>
      </div>
    </el-row>
    <!-- 节点卡片-->
    <el-row v-if="showMap" style="background:#FFFFFF;margin:15px">
      <el-row style="margin-top:15px" v-show="arch=='CPU'">
        <el-col :span="3" style="height:92px;border: 1.5px solid #D6D6D6;width:14%;margin-left:2%">
          <div style="color:#262626;font-size: 14px;font-weight: bold;padding: 11px 5px 8px 10px;">运行状态</div>
          <div style="height:45px;width:100%">
            <el-col :span="6">
              <div style="background:#0091FF;width:35px;height:35px;margin-left:5px">
                <img style="width:25px;position:relative;top:5px;left:5px" src="@/assets/imgs/cn-insight/node.png" alt="" />
              </div>
            </el-col>
            <el-col :span="18">
              <div style="color:#696969;font-size:12px;text-align: left;position:relative;bottom:5px;text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;">
                <span style="color:#696969;font-size:16px;font-weight: bold">{{ nodeTip.nodeName }}</span><br />{{ nodeTip.nodeIp }}
              </div>
            </el-col>
          </div>
        </el-col>
        <el-col :span="3" class="cpuCard" @click.native="getCpuMap()" v-show="showMapList.includes('CPU使用率')">
          <div style="color:#262626;font-size: 36px;font-weight: bold;position:relative;top:35px;left:5%">{{ nodeTip.nodeCpuUsePercent }}</div>
        </el-col>
        <el-col :span="3" class="memoryCard" @click.native="getMemMap()" v-show="showMapList.includes('内存使用率')">
          <div style="color:#262626;font-size: 36px;font-weight: bold;position:relative;top:35px;left:5%">{{ nodeTip.nodeMemUsePercent }}</div>
        </el-col>
        <el-col :span="3" class="containerCard" @click.native="getContainerMap()" v-show="showMapList.includes('容器组用量')">
          <div><el-button type="primary" size="mini" style="height: 22px; line-height: 22px;padding: 0px 6px;position: relative;left: 49%;top: 5px;z-index:9999" @click="linkContainer()">监控详情</el-button></div>
          <div style="color:#262626;font-size: 36px;font-weight: bold;position:relative;top:13px;left:5%">{{ nodeTip.nodeContainerUsePercent }}</div>
        </el-col>
        <el-col :span="3" class="hardDiskCard" @click.native="getDiskMap()" v-show="showMapList.includes('磁盘使用率')">
          <div style="color:#262626;font-size: 36px;font-weight: bold;position:relative;top:35px;left:5%">{{ nodeTip.nodeDiskUsePercent }}</div>
        </el-col>
        <el-col :span="3" class="networkCard" @click.native="getNetworkMap()" v-show="showMapList.includes('网卡IO流量')">
          <div style="color:#262626;font-size: 36px;font-weight: bold;position:relative;top:35px;left:5%">{{ nodeTip.nodeNetIops }}次</div>
        </el-col>
      </el-row>
      <el-row style="margin-top:15px" v-show="arch=='GPU'">
        <el-col :span="3" style="height:92px;border: 1.5px solid #D6D6D6;width:12%;margin-left:0.5%">
          <div style="color:#262626;font-size: 14px;font-weight: bold;padding: 11px 5px 8px 10px;">运行状态</div>
          <div style="height:45px;width:100%">
            <el-col :span="6">
              <div style="background:#0091FF;width:30px;height:30px;margin-left:5px">
                <img style="width:20px;position:relative;top:5px;left:5px" src="@/assets/imgs/cn-insight/node.png" alt="" />
              </div>
            </el-col>
            <el-col :span="18">
              <div style="color:#696969;font-size:12px;text-align: left;position:relative;bottom:5px;text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;">
                <span style="color:#696969;font-size:16px;font-weight: bold">{{ nodeTip.nodeName }}</span><br />{{ nodeTip.nodeIp }}
              </div>
            </el-col>
          </div>
        </el-col>
        <el-col :span="3" class="GpuCard1"  @click.native="getCpuMap()"  v-show="showMapList.includes('CPU使用率')">
          <div style="color:#262626;font-size: 32px;font-weight: bold;position:relative;top:40px;left:14%">{{ nodeTip.nodeCpuUsePercent }}</div>
        </el-col>
        <el-col :span="3" class="GpuCard2" @click.native="getMemMap()"  v-show="showMapList.includes('内存使用率')">
          <div style="color:#262626;font-size: 32px;font-weight: bold;position:relative;top:40px;left:14%">{{ nodeTip.nodeMemUsePercent }}</div>
        </el-col>
        <el-col :span="3" class="GpuCard3" @click.native="getContainerMap()"  v-show="showMapList.includes('容器组用量')">
          <div><el-button type="primary" size="mini" style="height: 22px; line-height: 22px;padding: 0px 6px;position: relative;left: 59%;top: 0px;z-index:9999" @click="linkContainer()">监控详情</el-button></div>
          <div style="color:#262626;font-size: 32px;font-weight: bold;position:relative;top:18px;left:14%">{{ nodeTip.nodeContainerUsePercent }}</div>
        </el-col>
        <el-col :span="3" class="GpuCard4" @click.native="getNodeGpuUsage()"  v-show="showMapList.includes('GPU使用率')">
          <div style="color:#262626;font-size: 32px;font-weight: bold;position:relative;top:40px;left:14%">{{ nodeTip.nodeGpuUsage }}%</div>
        </el-col>
        <el-col :span="3" class="GpuCard5" @click.native="getNodeGpuMemUsage()"  v-show="showMapList.includes('显存使用率')">
          <div style="color:#262626;font-size: 32px;font-weight: bold;position:relative;top:40px;left:14%">{{ nodeTip.nodeGpuMemUsage }}%</div>
        </el-col>
        <el-col :span="3" class="GpuCard6" @click.native="getNodeGpuTemp()"  v-show="showMapList.includes('显卡温度')">
          <div style="color:#262626;font-size: 32px;font-weight: bold;position:relative;top:40px;left:14%">{{ nodeTip.nodeGpuTemp }}℃</div>
        </el-col>
        <el-col :span="3" class="GpuCard7" @click.native="getNodeGpuPower()"  v-show="showMapList.includes('GPU功率')">
          <div style="color:#262626;font-size: 32px;font-weight: bold;position:relative;top:40px;left:14%">{{ nodeTip.nodeGpuPower }}W</div>
        </el-col>
      </el-row>
      <!-- 趋势图-->
      <div style="background:#FFFFFF;margin:15px">
        <div id="usageMap" style="width:100%;height:300px"></div>
      </div>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getClusterList, getNodeList, getNodeTable, getNodeTask } from '@/api/cnap/cn-insight'
import cloudVendorHandle from '@/views/mixin/cloudVendorHandle.js'

export default {
  name: 'CNInsightNode',
  components: { },
  mixins: [cloudVendorHandle],
  data() {
    return {
      showOptions: [{
          value: 'CPU使用率',
          label: 'CPU使用率'
        }, {
          value: '内存使用率',
          label: '内存使用率'
        }, {
          value: '容器组用量',
          label: '容器组用量'
        }, {
          value: '磁盘使用率',
          label: '磁盘使用率'
        }, {
          value: '网卡IO流量',
          label: '网卡IO流量'
        }, {
          value: 'GPU使用率',
          label: 'GPU使用率'
        }, {
          value: '显存使用率',
          label: '显存使用率'
        }, {
          value: '显卡温度',
          label: '显卡温度'
        }, {
          value: 'GPU功率',
          label: 'GPU功率'
        }],

      showMapList: ['CPU使用率','内存使用率','容器组用量','磁盘使用率','网卡IO流量','GPU使用率','显存使用率','显卡温度','GPU功率'],
      nodeHardware:'',
      arch:'',
      isResult: false,
      nodeName: '', // 节点名称
      searchForm: {
        category: '', // 集群供应商
        cluster: '', // 集群
        node: '', // 节点
        container: ''// 容器组
      },
      clusterOptions: [], // 集群列表
      nodeOptions: [], // 节点列表
      nodeTip: { // 卡片组信息
        nodeName: '', // 节点名称
        nodeIp: '', // 节点ip
        nodeCpuUsePercent: '', // cpu使用率
        nodeMemUsePercent: '', // 内存使用率
        nodeContainerUsePercent: '', // 容器组使用率
        nodeDiskUsePercent: ''// 硬盘使用率
      },
      usageMap: null, // 趋势图
      currentPage: 1, // 当前页码
      pageSize: 10, // 一页数量
      totalData: 10, // 总数
      nodeList: [], // 节点表格
      mapData: {}, // 趋势图数据
      showMap: false,
      containerParams: {}
    }
  },
  computed: {
    /**
     * @description: 云商参数
     * @return {*}
     */
    cloudVendorValue() {
      return this.searchForm.category
    }
  },
  created() {},
  mounted() {
    this.initData()
  },
  methods: {
    /**
     * @description: 初始化数据
     * @return {*}
     */
    initData() {
      this.searchForm.category = ''
      this.searchForm.cluster = ''
      this.searchForm.node = ''
      this.getDataList(1)
    },

    /**
     * @description: 页面跳转
     * @description: 跳转容器组管理
     * @return {*}
     */
    linkContainer() {
      this.$emit('getContainer', this.containerParams)
    },
    /**
     * @description: 页面跳转
     * @description: 跳转节点管理
     * @return {*}
     */
    linkNodeManage(row) {
      this.$router.push({
        path: '/hybrid-cloud/cluster',
        query: {
          k8sClusterName: row.k8sClusterName,
          cloudVendor: row.cloudVendor,
          accountName: row.accountName,
          targetTab: 'node',
          keyword: row.nodeName
        }
      })
    },
    /**
     * @description: 获取集群供应商下的集群
     * @description: 选择集群供应商生效
     * @return {*}
     */
    getCluster(val) {
      const params = {
        ...this.cloudVendorParams
      }
      this.searchForm.cluster = ''// 集群置空
      this.clusterOptions = []// 集群列表置空
      this.nodeOptions = []// 节点列表置空
      this.searchForm.node = ''// 节点置空
      getClusterList(params).then(res => {
        this.clusterOptions = res.data// 返回数据在res.data中
        if (res.data.length === 0) {
          //this.nodeList = []
          //this.showMap = false
        } else {
          // this.searchForm.cluster = res.data[0].value
          // this.getNode(res.data[0].value)
        }
      })
    },
    /**
     * @description: 获取集群下的节点
     * @description: 选择集群生效
     * @return {*}
     */
    getNode(val) {
      this.searchForm.node = ''// 节点置空
      this.nodeOptions = []// 节点列表置空
      const params = {
        ...this.cloudVendorParams,
        clusterId: val
      }
      getNodeList(params).then(res => {
        this.nodeOptions = res.data// 返回数据在res.data中
      })
    },
    /**
     * @description: 点击搜索
     * @description: 获取数据
     * @return {*}
     */
    search() {
      this.isResult = true
      this.getDataList(1)
    },
    /**
     * @description: 筛选框重置
     * @return {*}
     */
    resetClick() {
      this.searchForm.category = ''
      this.searchForm.cluster = ''
      this.searchForm.node = ''
      this.clusterOptions = []
      this.nodeOptions = []
      this.getDataList(1)
    },
    /**
     * @description: 各种操作触发
     * @description: 获取数据
     * @return {*}
     */
    getDataList(page) {
      const params = {
        ...this.cloudVendorParams, // 集群供应商
        k8sClusterName: this.searchForm.cluster, // 集群
        nodeName: this.searchForm.node, // 节点
        page: page || this.currentPage, // 当前页
        pageSize: this.pageSize// 一页大小
      }
      this.nodeList = []
      this.showMap = false
      this.currentPage = params.page
      getNodeTable(params).then(res => {
        // res.code === 200正常
        if (res.code === 200) {
          for (let i = 0; i < res.data.result.length; i++) {
            const item = {
              index: (this.currentPage - 1) * this.pageSize + i + 1, // 标号
              nodeName: res.data.result[i].nodeName, // 节点名称
              nodeIp: res.data.result[i].nodeIp, // 节点ip
              nodeType: res.data.result[i].nodeType, // 节点类型
              nodeRole: res.data.result[i].nodeRole, // 角色
              status: res.data.result[i].status, // 状态
              nodeCpuUsePercent: Math.round(res.data.result[i].nodeCpuUseNum / res.data.result[i].nodeCpuQuota * 10000) / 100 + '%', // cpu已使用
              nodeCpuUseNum: res.data.result[i].nodeCpuUseNum,
              nodeCpuQuota: res.data.result[i].nodeCpuQuota,
              nodeMemUsePercent: Math.round(res.data.result[i].nodeMemUseNum / res.data.result[i].nodeMemQuota * 10000) / 100 + '%', // 内存已使用
              nodeMemUseNum: res.data.result[i].nodeMemUseNum,
              nodeMemQuota: res.data.result[i].nodeMemQuota,
              nodeContainerUsePercent: Math.round(res.data.result[i].nodeContainerUseNum / res.data.result[i].nodeContainerQuota * 10000) / 100 + '%', // 容器组已使用
              nodeContainerUseNum: res.data.result[i].nodeContainerUseNum,
              nodeContainerQuota: res.data.result[i].nodeContainerQuota,
              nodeDiskUsePercent: Math.round(res.data.result[i].nodeDiskUseNum / res.data.result[i].nodeDiskQuota * 10000) / 100 + '%', // 硬盘已使用
              nodeDiskUseNum: res.data.result[i].nodeDiskUseNum,
              nodeDiskQuota: res.data.result[i].nodeDiskQuota,
              cloudVendor: res.data.result[i].cloudVendor,
              accountName: res.data.result[i].accountName || '', // 云账户
              k8sClusterName: res.data.result[i].k8sClusterName,
              nodeNetIops: res.data.result[i].nodeNetIops,
              nodeGpuUsage:res.data.result[i].nodeGpuUsage,
              nodeGpuMemUsage:res.data.result[i].nodeGpuMemUsage,
              nodeGpuTemp:res.data.result[i].nodeGpuTemp,
              nodeGpuPower:res.data.result[i].nodeGpuPower,
              arch:res.data.result[i].arch,
            }
            this.nodeList.push(item)// 加入表格
          }
          this.totalData = res.data.totalNum// 总数
          if (this.nodeList.length === 0) {
            this.showMap = false
          } else {
            this.showMap = true
            this.getDetail(this.nodeList[0])// 展示卡片组
          }
          this.isResult = false
        } else {
          // 数据查询失败
          // 输出报错信息
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.isResult = false
      })
    },
    /**
     * @description: 改变页码
     * @description: 获取数据
     * @return {*}
     */
    currentChange(val) {
      this.pageNum = val
      this.getDataList(this.pageNum)
    },
    /**
     * @description: 获取卡片组
     * @description: 获取趋势图
     * @return {*}
     */
    getDetail(row) {
      //this.nodeHardware = row.nodeHardware
      this.containerParams = {}
      this.nodeName = row.nodeName// 节点名称
      this.usageMap = null// 趋势图置空
      this.nodeTip = row// 卡片组信息
      console.log(this.nodeTip.nodeGpuUsage)
      const params = {
        cloudVendor: row.cloudVendor,
        accountName: row.accountName,
        k8sClusterName: row.k8sClusterName,
        nodeName: row.nodeName
      }
      this.containerParams = {
        category: this.formatVendorAccount(row.cloudVendor, row.accountName),
        cluster: row.k8sClusterName,
        node: row.nodeName
      }
      this.mapData = {}
      getNodeTask(params).then(res => {
        if (res.code === 200) {
          this.mapData = res.data.data// 趋势图信息
          this.arch = res.data.data.arch
          this.getCpuMap()// 绘制趋势图
        } else {
          (
          // 数据查询失败
          // 输出报错信息
            this.$message.error(res.message)
          )
        }
      })
    },
    /**
     * @description: 绘制趋势图
     * @description: cpu使用率
     * @return {*}
     */
    getCpuMap() {
      const name = 'cpu使用率'
      const xData = this.mapData.xData// X轴数据
      const yData = this.mapData.yData.cpu// Y轴数据
      this.drawMap(name, xData, yData)// 启动绘制
    },
    /**
     * @description: 绘制趋势图
     * @description: 内存使用率
     * @return {*}
     */
    getMemMap() {
      const name = '内存使用率'
      const xData = this.mapData.xData// X轴数据
      const yData = this.mapData.yData.memory// Y轴数据
      this.drawMap(name, xData, yData)// 启动绘制
    },
    /**
     * @description: 绘制趋势图
     * @description: 容器组用量
     * @return {*}
     */
    getContainerMap() {
      const name = '容器组用量'
      const xData = this.mapData.xData// X轴数据
      const yData = this.mapData.yData.pod// Y轴数据
      this.drawMap(name, xData, yData)// 启动绘制
    },
    /**
     * @description: 绘制趋势图
     * @description: 硬盘使用率
     * @return {*}
     */
    getDiskMap() {
      const name = '硬盘使用率'
      const xData = this.mapData.xData// X轴数据
      const yData = this.mapData.yData.disk// Y轴数据
      this.drawMap(name, xData, yData)// 启动绘制
    },
    /**
     * @description: 绘制趋势图
     * @description: 网卡io流量
     * @return {*}
     */
    getNetworkMap() {
      const name = '网卡io流量'
      const xData = this.mapData.xData// X轴数据
      const yData = this.mapData.yData.net// Y轴数据
      this.drawMap(name, xData, yData)// 启动绘制
    },
    /**
     * @description: 绘制趋势图
     * @description: GPU使用率
     * @return {*}
     */
    getNodeGpuUsage() {
      const name = 'GPU使用率'
      const xData = this.mapData.xData// X轴数据
      const yData = this.mapData.yData.gpu_use// Y轴数据
      this.drawMap(name, xData, yData)// 启动绘制
    },
    /**
     * @description: 绘制趋势图
     * @description: 显存使用率
     * @return {*}
     */
    getNodeGpuMemUsage() {
      const name = '显存使用率'
      const xData = this.mapData.xData// X轴数据
      const yData = this.mapData.yData.gpu_mem_use// Y轴数据
      this.drawMap(name, xData, yData)// 启动绘制
    },
    /**
     * @description: 绘制趋势图
     * @description: 显卡温度
     * @return {*}
     */
    getNodeGpuTemp() {
      const name = '显卡温度'
      const xData = this.mapData.xData// X轴数据
      const yData = this.mapData.yData.gpu_temp// Y轴数据
      this.drawMap(name, xData, yData)// 启动绘制
    },
    /**
     * @description: 绘制趋势图
     * @description: GPU功率
     * @return {*}
     */
    getNodeGpuPower() {
      const name = 'GPU功率'
      const xData = this.mapData.xData// X轴数据
      const yData = this.mapData.yData.gpu_energy// Y轴数据
      this.drawMap(name, xData, yData)// 启动绘制
    },

    /**
     * @description: 趋势图绘制
     * @description: 根据入参确认哪个趋势图
     * @return {*}
     */
    drawMap(name, xData, yData) {
      let unit = '%'
      if(name=='显卡温度'){
        unit= '℃'
      }
      if(name=='GPU功率'){
        unit= 'W'
      }
      if(name=='网卡io流量'){
        unit= ''
      }
      // 防止重复启动
      // 节省内存
      if (this.usageMap == null) {
        this.usageMap = echarts.init(document.getElementById('usageMap'))
      }
      const option = {
        title: [{
          text: name, // 趋势图名称
          textStyle: {
            align: 'left', // 文字位置
            fontSize: 14// 文字大小
          },
          top: '2%', // 位置
          left: '2%'// 位置
        },
        {
          text: '/近一个小时', // 副标题名称
          textStyle: {
            align: 'left', // 位置
            fontSize: 14, // 大小
            color: '#A3B0BB'// 颜色
          },
          top: '2%', // 位置
          left: '7%'// 位置
        }
        ],
        grid: {
          top: '15%', // 位置
          left: '5%', // 位置
          right: '5%', // 位置
          bottom: '8%'// 也可设置left和right设置距离来控制图表的大小
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        /* legend: {
          data: ['使用率'],
          top: '8%',
          left: '2%',
          align: 'left',
          textStyle: {
            color: 'black'
          }
        }, */
        xAxis: {
          data: xData,
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#C4C6CC'// 颜色
            }
          },
          axisTick: {
            show: true // 隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#C4C6CC' // X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            //name: '亿元',
            nameTextStyle: {
              color: 'black'// 颜色
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              show: true,
              formatter: function (value) {
                var result=value+unit
                return result;
                },// 右侧Y轴文字显示
              textStyle: {
                color: '#C4C6CC'// 颜色
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#C4C6CC'// 颜色
              }
            }
          }
        ],
        series: [{
          name: name,
          type: 'line', // 类型
          xAxisIndex: 0,
          yAxisIndex: 0,
          width: 25, // 大小
          smooth: true, // 平滑曲线显示
          showAllSymbol: true, // 显示所有图形。
          symbol: 'circle', // 标记的图形为实心圆
          symbolSize: 1, // 标记的大小
          itemStyle: {
            // 折线拐点标志的样式
            color: 'rgba(157, 0, 255, 1)'
          },
          lineStyle: {
            normal: {
              width: 1,
              color: {
                type: 'linear',
                colorStops: [{
                  offset: 0,
                  color: 'rgba(39, 95, 252, 1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(229, 17, 248, 1)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(161, 96, 253, 0.1)', // 阴影颜色
              shadowBlur: 10,
              shadowOffsetY: 20
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(161, 96, 253, 0.2000)'// 渐变色
              }, {
                offset: 0.8,
                color: 'rgba(161, 96, 253, 0)'// 渐变色
              }], false),
              shadowColor: 'rgba(161, 96, 253, 0.2000)', // 阴影颜色
              shadowBlur: 10
            }
          },
          data: yData
        }
        ]
      }
      this.usageMap.setOption(option, true)
    }
  }
}
</script>

<style lang="less" scoped>
.cn-insight-node-container {
  overflow-x: hidden;
    .el-radio-button {
      margin-right: 50px !important;
  }
  .cpuCard{
    background: url('../../../../assets/imgs/cn-insight/cpuCard.png') no-repeat center;
    background-size: 110% 100%;
    height:95px;
    margin-left: 50px;
    cursor: pointer;
  }
  .memoryCard{
    background: url('../../../../assets/imgs/cn-insight/memoryCard.png') no-repeat center;
    background-size: 110% 100%;
    height:95px;
    margin-left: 50px;
    cursor: pointer;
  }
  .containerCard{
    background: url('../../../../assets/imgs/cn-insight/containerCard.png') no-repeat center;
    background-size: 110% 100%;
    height:95px;
    margin-left:50px;
    cursor: pointer;
  }
  .hardDiskCard{
    background: url('../../../../assets/imgs/cn-insight/hardDiskCard.png') no-repeat center;
    background-size: 110% 100%;
    height:95px;
    margin-left: 50px;
    cursor: pointer;
  }
  .networkCard{
    background: url('../../../../assets/imgs/cn-insight/networkCard.png') no-repeat center;
    background-size: 110% 100%;
    height:95px;
    margin-left: 50px;
    cursor: pointer;
  }
  .GpuCard1{
    background: url('../../../../assets/imgs/cn-insight/GpuCard1.png') no-repeat center;
    background-size: 95% 100%;
    height:95px;
    margin-left: 0px;
    cursor: pointer;
  }
  .GpuCard2{
    background: url('../../../../assets/imgs/cn-insight/GpuCard2.png') no-repeat center;
    background-size: 95% 100%;
    height:95px;
    margin-left: 0px;
    cursor: pointer;
  }
  .GpuCard3{
    background: url('../../../../assets/imgs/cn-insight/GpuCard3.png') no-repeat center;
    background-size: 95% 100%;
    height:95px;
    margin-left: 0px;
    cursor: pointer;
  }
  .GpuCard4{
    background: url('../../../../assets/imgs/cn-insight/GpuCard4.png') no-repeat center;
    background-size: 95% 100%;
    height:95px;
    margin-left: 0px;
    cursor: pointer;
  }
  .GpuCard5{
    background: url('../../../../assets/imgs/cn-insight/GpuCard5.png') no-repeat center;
    background-size: 95% 100%;
    height:95px;
    margin-left: 0px;
    cursor: pointer;
  }
  .GpuCard6{
    background: url('../../../../assets/imgs/cn-insight/GpuCard6.png') no-repeat center;
    background-size: 95% 100%;
    height:95px;
    margin-left: 0px;
    cursor: pointer;
  }
  .GpuCard7{
    background: url('../../../../assets/imgs/cn-insight/GpuCard7.png') no-repeat center;
    background-size: 95% 100%;
    height:95px;
    margin-left: 0px;
    cursor: pointer;
  }
}
</style>
